import {designPage} from "@peryl/react-compose";
import {Box, Button, DatePicker, GridCol, GridRow, i18n, Icon, PageCard, PageCardContent, PageCardTitle} from "plain-design";
import './workspace-page.scss';
import {RollingNumber} from "../../common/RollingNumber";
import {buildAssetsPath} from "../../common/buildAssetsPath";

export default designPage(() => {

  const objects: {
    id: string,
    name: string,
    avatar: string,
  }[] = [
    { id: 'sponge_bob', name: i18n.$intl('page.workspace.objects.sponge_bob').d('sponge_bob'), avatar: buildAssetsPath('images/teams/sponge_bob.jpg') },
    { id: 'tentacles', name: i18n.$intl('page.workspace.objects.tentacles').d('tentacles'), avatar: buildAssetsPath('images/teams/tentacles.jpg') },
    { id: 'patric', name: i18n.$intl('page.workspace.objects.patric').d('patric'), avatar: buildAssetsPath('images/teams/patric.jpg') },
    { id: 'captain', name: i18n.$intl('page.workspace.objects.captain').d('captain'), avatar: buildAssetsPath('images/teams/captain.jpg') },
    { id: 'plankton', name: i18n.$intl('page.workspace.objects.plankton').d('plankton'), avatar: buildAssetsPath('images/teams/plankton.jpg') },
    { id: 'krabby_patty', name: i18n.$intl('page.workspace.objects.krabby_patty').d('krabby_patty'), avatar: buildAssetsPath('images/teams/plankton.jpg') },
  ];

  const nextTime = (() => {
    let time = DatePicker.plainDate.today().getDayJs();
    return () => {
      time = time.minute(-Math.ceil(Math.random() * 1000));
      return time.format('YYYY-MM-DD HH:mm');
    };
  })();


  return () => (
    <div className="workspace-page">
      <PageCard>
        <PageCardTitle title={i18n.$intl('page.workspace.workspace').d('工作台')}></PageCardTitle>
        <PageCardContent>
          <div className="user-information">
            <div className="user-information-avatar">
              <Icon icon="pi-user"/>
            </div>
            <div className="user-information-description">
              <div>{i18n.$intl('page.workspace.userInformation.greeting').d('早安, 请开始您一天的工作吧~')}</div>
              <div>
                <Icon icon="pi-cloud"/>
                <span>{i18n.$intl('page.workspace.userInformation.weather').d('今日局部多云，最低15℃，最高25℃，出门记得带伞哦。')}</span>
              </div>
            </div>
            <div className="user-information-statistic">
              <div>
                <div>{i18n.$intl('page.workspace.userInformation.repository').d('仓库数量')} / {i18n.$intl('page.workspace.userInformation.star').d('Star')}</div>
                <div><RollingNumber val={99}/> / <RollingNumber val={208}/></div>
              </div>
              <div>
                <div>{i18n.$intl('page.workspace.userInformation.follow').d('关注')} / {i18n.$intl('page.workspace.userInformation.participate').d('参与')}</div>
                <div><RollingNumber val={18}/> / <RollingNumber val={22}/></div>
              </div>
              <div>
                <div>{i18n.$intl('page.workspace.userInformation.commit').d('提交')} / {i18n.$intl('page.workspace.userInformation.rank').d('排名')}</div>
                <div><RollingNumber val={12345678}/> / <RollingNumber val={5073}/></div>
              </div>
            </div>
          </div>
        </PageCardContent>
      </PageCard>
      <GridRow rowGutter="default" gutter="default">
        <GridCol span={16}>
          <PageCard>
            <PageCardTitle title={i18n.$intl('page.workspace.processingProject').d('进行中的项目')}>
              <Button label={i18n.$intl('page.workspace.allProjects').d('全部的项目')} mode="text"/>
            </PageCardTitle>
            <PageCardContent noPadding>
              <div className="project-list project-list-3">
                {(i18n.$intl('page.workspace.projects').d('') as any as { title: string, logo: string, description: string }[]).map(item => {
                  return (
                    <Box className="project-item padding" key={item.title}>
                      <div className="project-item-title">
                        <img src={buildAssetsPath(item.logo)}/>
                        <div>{item.title}</div>
                      </div>
                      <div className="project-item-description">{item.description}</div>
                    </Box>
                  );
                })}
              </div>
            </PageCardContent>
          </PageCard>
          <PageCard>
            <PageCardTitle title={i18n.$intl('page.workspace.friendNew').d('好友动态')}>
              <Button label={i18n.$intl('page.workspace.allNews').d('全部动态')} mode="text"/>
            </PageCardTitle>
            <PageCardContent noPadding>
              <div className="news-list">
                {(() => {
                  const self = 'plankton';
                  const list = i18n.$intl('page.workspace.friendNews').d('') as any as { user: string, message: string }[];
                  const content: any[] = [];
                  list.forEach((itemNew, index) => {
                    content.push(
                      <Box key={index} className="workspace-page-news-item padding">
                        <div className="workspace-page-news-item-avatar">
                          <img src={(objects.find(i => i.id === itemNew.user)?.avatar || '')}/>
                        </div>
                        <div className="workspace-page-news-item-message">
                          <div className="workspace-page-news-item-message-content">{(() => {
                            const message = itemNew.message;
                            const subContent: any[] = [];

                            const reg = /<<(.*?)>>/g;
                            let match = reg.exec(message);
                            let lastEnd = 0;
                            let key = 0;

                            while (!!match) {
                              const matchKey = match[1];
                              const matchIndex = match.index;
                              const prepend = message.slice(lastEnd, matchIndex).trim();
                              if (!!prepend) {subContent.push(<span key={key++}>{prepend}</span>);}
                              lastEnd = matchIndex + matchKey.length + 4;

                              const objectItem = objects.find(i => i.id == matchKey);

                              if (!objectItem) {
                                subContent.push(
                                  <span key={key++}>{matchKey}</span>
                                );
                              } else {
                                subContent.push(
                                  <span key={key++} onClick={() => {window.open((objectItem.avatar));}} className="workspace-page-news-item-link">{objectItem.name}</span>
                                );
                              }

                              match = reg.exec(message);
                            }

                            subContent.push(<span key={key++}>{message.slice(lastEnd)}</span>);

                            return subContent;
                          })()}</div>
                          <div className="workspace-page-news-item-message-datetime">{nextTime()}</div>
                        </div>
                      </Box>
                    );
                  });
                  return content;
                })()}
              </div>
            </PageCardContent>
          </PageCard>
        </GridCol>
        <GridCol span={8}>
          <PageCard>
            <PageCardTitle title={i18n.$intl('page.workspace.quickAccess').d('快速访问')}>
              <Icon icon="pi-settings"/>
            </PageCardTitle>
            <PageCardContent noPadding>
              <div className="quick-access-list project-list project-list-5">
                {(i18n.$intl('page.workspace.quickAccessOptions').d('') as any as { title: string, icon: string }[]).map(item => {
                  return (
                    <Box className="project-item padding" key={item.title}>
                      <div><Icon icon={item.icon}/></div>
                      <div>{item.title}</div>
                    </Box>
                  );
                })}
              </div>
            </PageCardContent>
          </PageCard>
          <PageCard>
            <PageCardTitle title={i18n.$intl('page.workspace.customOperation').d('自定义操作')}>
              <Icon icon="pi-plus"/>
            </PageCardTitle>
            <PageCardContent noPadding>
              <div className="quick-access-list project-list project-list-5">
                {(i18n.$intl('page.workspace.customOperationOptions').d('') as any as string[]).map(item => {
                  return (
                    <Box className="project-item padding" key={item}>
                      <div>{item}</div>
                    </Box>
                  );
                })}
              </div>
            </PageCardContent>
          </PageCard>
          <PageCard>
            <PageCardTitle title={i18n.$intl('page.workspace.todos').d('待办事项')}>
              <Icon icon="pi-more"/>
            </PageCardTitle>
            <PageCardContent noPadding>
              <div className="todo-list project-list">
                {(i18n.$intl('page.workspace.todoList').d('') as any as { title: string, status: string, statusColor: string, type: string, typeColor: string, desc: string, }[]).map(item => {
                  return (
                    <Box className="project-item padding" key={item.title}>
                      <div>
                        <div>{item.title}</div>
                        <div>
                          <div className={`item item-status-${item.statusColor}`}>{item.status}</div>
                          <div className={`item item-status-${item.typeColor}`}>{item.type}</div>
                        </div>
                      </div>
                      <div>{item.desc}</div>
                    </Box>
                  );
                })}
              </div>
            </PageCardContent>
          </PageCard>
          <PageCard>
            <PageCardTitle title={i18n.$intl('page.workspace.myTeam').d('我的团队')}>
              <Icon icon="pi-more"/>
            </PageCardTitle>
            <PageCardContent noPadding>
              <div className="my-team-list project-list">
                {(i18n.$intl('page.workspace.myTeamOptions').d('') as any as { title: string, avatar: string, desc: '' }[]).map(item => {
                  return (
                    <Box className="project-item padding" key={item.title}>
                      <img src={buildAssetsPath(item.avatar)}/>
                      <div>
                        <div>{item.title}</div>
                        <div>{item.desc}</div>
                      </div>
                    </Box>
                  );
                })}
              </div>
            </PageCardContent>
          </PageCard>
        </GridCol>
      </GridRow>
    </div>
  );
});
